<template>
  <!-- 页面标题 -->
  <view class="page-title">商品详情</view>

  <!-- 商品图片轮播 -->
<!--  <swiper class="goods-swiper" indicator-dots :autoplay="true" :interval="3000" :duration="500">
    <swiper-item v-for="(image, index) in detailData.images" :key="index">
      <image class="goods-image" :src="image" mode="aspectFit" lazy-load></image>
    </swiper-item>
  </swiper> -->
  

  <!-- 商品基本信息 -->
  <view class="goods-info">
	  <!-- 商品图片 -->
	  <image :src="detailData.coverImage" mode=""></image>
    <!-- 商品价格 -->
    <view class="goods-price">￥{{ detailData.price }}</view>
    <!-- 商品名称 -->
    <view class="goods-name">{{ detailData.name }}</view>
  </view>

  <!-- 商品详情描述 -->
  <view class="goods-description">
    <view class="description-title">商品详情</view>
    <view class="detail" v-html="detailData.content">
    	
    </view>
	<!-- <view class="description-content">{{ detailData.desc }}</view> -->
  </view>

  <!-- 底部操作栏 -->
  <view class="bottom-bar">
    <button class="add-to-cart-btn" @click="addToCart">加入购物车</button>
    <button class="go-to-cart-btn" @click="goToCart">进入购物车</button>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { getDetail } from '../../api/product.js';
import { ref } from 'vue';
import { addCart } from '../../api/cart.js';

// 定义商品详情数据
let detailData = ref({
  images: [], // 商品图片数组
  price: 0,
  name: '',
  sales: 0,
  desc: ''
});
let addId=ref('');

// 获取商品详情列表
async function detail(id) {
  let r1 = await getDetail(id);
  console.log(r1);
  console.log(r1.data.data);
  detailData.value = r1.data.data;
}

// 页面加载时获取商品详情
onLoad(function (options) {
  console.log(options.id);
  addId.value=options.id
  detail(options.id);
});

// 加入购物车函数
 async function addToCart() {
  // 这里可以添加加入购物车的逻辑
  console.log('加入购物车');
  let r2= await addCart(addId.value,1,detailData.value.price)
  console.log(r2.data);
  uni.showToast({
  	title: '添加购物车成功',
  	icon: 'success'
  });
  
}

// 进入购物车函数
function goToCart() {
  // 这里可以添加进入购物车的逻辑
  console.log('进入购物车');
  uni.switchTab({
  	url:"/pages/cart/cart"
  })
}
</script>

<style scoped>
/* 页面整体样式 */
page {
  background-color: #f4f4f4;
}
:deep(.detail img){
	width: 100%;
}

/* 页面标题样式 */
.page-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  color: #333;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 商品图片轮播样式 */
.goods-swiper {
  width: 100%;
  height: 400px;
  background-color: #fff;
}

.goods-image {
  width: 100%;
  height: 100%;
}

/* 商品基本信息样式 */
.goods-info {
  background-color: #fff;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.goods-price {
  font-size: 24px;
  color: #f40;
  font-weight: bold;
  margin-bottom: 5px;
}

.goods-name {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.goods-sales {
  font-size: 14px;
  color: #999;
}

/* 商品详情描述样式 */
.goods-description {
  background-color: #fff;
  padding: 15px;
  margin-top: 10px;
}

.description-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.description-content {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* 底部操作栏样式 */
.bottom-bar {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px;
  border-top: 1px solid #eee;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
}

/* 加入购物车按钮样式 */
.add-to-cart-btn {
  width: 45%;
  background-color: #f40;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-to-cart-btn:hover {
  background-color: #e53e00;
}

/* 进入购物车按钮样式 */
.go-to-cart-btn {
  width: 45%;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.go-to-cart-btn:hover {
  background-color: #222;
}
</style>